<template>
  <div id = 'OrderGantt' style="height: 100%">
    <el-menu
      :default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      default-active="0"
      active-text-color="#ffd04b">
      <el-menu-item index="0" class="menu_item" @click="toHomePage" style="width: 100px">
        <i class="el-icon-s-home" style="font-size: 50px; margin-right: 25px"></i>
      </el-menu-item>
      <el-menu-item index="1" class="menu_item" @click="toOrderGantt">订单甘特图</el-menu-item>
      <el-menu-item index="2" class="menu_item" @click="toResourceGantt">资源甘特图</el-menu-item>
      <el-menu-item index="3" class="menu_item" @click="toResourceLoad">资源负载图</el-menu-item>
      <el-menu-item index="4" class="menu_item">
        <a href="http://localhost/#/index">新系统</a>
      </el-menu-item>

      <div align="right" style="padding-right: 60px; margin-top: 10px">
        <el-input
          placeholder="请输入搜索内容"
          style="width: 300px"
          :disabled=inputDisable
          v-model="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="trick" :disabled=inputDisable></el-button>
        </el-input>
      </div>
    </el-menu>
    <el-row style="font-size: 50px; font-weight: bold; margin-top: 20px; margin-bottom: 20px" align="center">
      <div style="text-align: center;margin: auto">
        欢迎进入高级排程系统
      </div>
    </el-row>
    <div style="padding-left: 300px; padding-right: 300px">
      <el-carousel height="400px" style="width: 711px">
        <el-carousel-item>
          <img src="../asserts/1.jpg" height="400px"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../asserts/2.jpg" height="400px" width="100%"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../asserts/3.jpg" height="400px" width="100%"/>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../asserts/4.jpg" height="400px" width="100%"/>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
    export default {
        name: "OrderGantt",
        data() {
            return {
                searchInput: '',
                inputDisable: false,
                percentage: 20,
                colors: '#f56c6c',
                date: '2020-10-30',
                selectedDate: '',
                orders:[
                    {
                        orderId: '10086',
                        state: 'complete',
                        stepList: [
                            {
                                stepName: '装配',
                                stepWeight: '20%',
                                stepColor: '#333333'
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            trick() {
                this.$alert('恭喜你发现了一个彩蛋，这个按钮实际上没有任何作用！^_^', 'TRICK!!!', {
                    confirmButtonText: '我知道了'
                });
                this.searchInput = '';
                this.inputDisable = true;
            },
            toHomePage(){
                this.$router.push({path: '/'});
            },
            toOrderGantt(){
                this.$router.push({path: '/OrderGantt'});
            },
            toResourceGantt(){
                this.$router.push({path: '/ResourceGantt'});
            },
            toResourceLoad(){
                this.$router.push({path: '/ResourceLoad'});
            }
        }
    }
</script>

<style scoped>

  .menu_item {
    width: 150px;
    font-size: larger;
    text-align: center;
    font-weight: bold;
  }

</style>
